<template>
	<view class="container">
		<view class="intro">
			<view class="logo">
				<image class="logo-img" src="/static/logo.svg" mode="aspectFit"></image>
			</view>
			<view class="title">知汛uni-app</view>
			<view class="subtitle">智慧水库管理系统</view>
		</view>
		
		<!-- 快捷入口 -->
		<view class="quick-access">
			<text class="section-title">快捷访问</text>
			<view class="access-grid">
				<view class="access-card" @click="goToRainfall">
					<view class="card-icon">🌧️</view>
					<text class="card-title">雨情实测</text>
					<text class="card-desc">泰森多边形 · 降雨统计</text>
				</view>
				
				<view class="access-card" @click="goToWater">
					<view class="card-icon">💧</view>
					<text class="card-title">水情监测</text>
					<text class="card-desc">水位 · 流量 · 蓄量</text>
				</view>
				
				<view class="access-card" @click="goToWeather">
					<view class="card-icon">🌪️</view>
					<text class="card-title">天气预报</text>
					<text class="card-desc">东三省 · 风场粒子</text>
				</view>
				
				<view class="access-card" @click="goToReservoir">
					<view class="card-icon">🏞️</view>
					<text class="card-title">综合管理</text>
					<text class="card-desc">水库选择 · 多功能</text>
				</view>
			</view>
		</view>
		
		<!-- 水库列表 -->
		<view class="reservoir-list" v-if="reservoirs.length > 0">
			<text class="section-title">水库快速访问</text>
			<view class="reservoir-items">
				<view 
					v-for="reservoir in reservoirs" 
					:key="reservoir.stcd"
					class="reservoir-card"
				>
					<view class="reservoir-header">
						<text class="reservoir-name">{{ reservoir.stnm }}</text>
						<text class="reservoir-code">{{ reservoir.stcd }}</text>
					</view>
					<view class="reservoir-links">
						<button class="link-btn rainfall" @click="goToRainfallWithCode(reservoir.stcd)">雨情</button>
						<button class="link-btn water" @click="goToWaterWithCode(reservoir.stcd)">水情</button>
					</view>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<button class="btn-secondary" @click="goToAbout">关于系统</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { API_BASE_URL } from '@/config/api.js'

// 水库列表
const reservoirs = ref([])

// 获取水库列表
const fetchReservoirs = async () => {
	try {
		const res = await uni.request({
			url: `${API_BASE_URL}/api/get_all_reservoirs`,
			method: 'GET'
		})
		
		if (res.data && res.data.success) {
			reservoirs.value = res.data.data || []
			console.log('获取水库列表成功:', reservoirs.value.length)
		}
	} catch (error) {
		console.error('获取水库列表失败:', error)
	}
}

// 快捷入口导航
const goToRainfall = () => {
	uni.showToast({
		title: '请从下方选择水库',
		icon: 'none'
	})
}

const goToWater = () => {
	uni.showToast({
		title: '请从下方选择水库',
		icon: 'none'
	})
}

const goToWeather = () => {
	uni.navigateTo({
		url: '/pages/weather/forecast'
	})
}

const goToReservoir = () => {
	uni.navigateTo({
		url: '/pages/reservoir/reservoir'
	})
}

// 带参数导航
const goToRainfallWithCode = (basinCode) => {
	uni.navigateTo({
		url: `/pages/rainfall/measured?basinCode=${basinCode}`
	})
}

const goToWaterWithCode = (stationCode) => {
	uni.navigateTo({
		url: `/pages/water/detail?stationCode=${stationCode}`
	})
}

const goToAbout = () => {
	uni.navigateTo({
		url: '/pages/about/about'
	})
}

onMounted(() => {
	fetchReservoirs()
})
</script>

<script>
export default {
	onLoad() {
		console.log('首页加载完成')
	}
}
</script>

<style scoped>
.container {
	padding: 40rpx 30rpx;
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.intro {
	text-align: center;
	margin-bottom: 50rpx;
	color: #fff;
}

.logo {
	margin-bottom: 30rpx;
}

.logo-img {
	width: 100rpx;
	height: 100rpx;
	border-radius: 20rpx;
}

.title {
	font-size: 44rpx;
	font-weight: bold;
	margin-bottom: 15rpx;
	color: #fff;
}

.subtitle {
	font-size: 26rpx;
	opacity: 0.9;
	color: #fff;
}

/* 快捷访问区域 */
.quick-access {
	margin-bottom: 40rpx;
}

.section-title {
	display: block;
	font-size: 32rpx;
	font-weight: 600;
	color: #fff;
	margin-bottom: 25rpx;
	padding-left: 10rpx;
}

.access-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.access-card {
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10rpx);
	border-radius: 20rpx;
	padding: 30rpx 20rpx;
	text-align: center;
	border: 1rpx solid rgba(255, 255, 255, 0.2);
	transition: all 0.3s ease;
}

.access-card:active {
	transform: scale(0.95);
	background: rgba(255, 255, 255, 0.25);
}

.card-icon {
	font-size: 50rpx;
	margin-bottom: 15rpx;
}

.card-title {
	display: block;
	font-size: 28rpx;
	font-weight: 600;
	color: #fff;
	margin-bottom: 8rpx;
}

.card-desc {
	display: block;
	font-size: 22rpx;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.4;
}

/* 水库列表区域 */
.reservoir-list {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10rpx);
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 40rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.reservoir-list .section-title {
	color: #fff;
	margin-bottom: 25rpx;
}

.reservoir-items {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.reservoir-card {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 16rpx;
	padding: 25rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.reservoir-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.reservoir-name {
	font-size: 30rpx;
	font-weight: 600;
	color: #fff;
}

.reservoir-code {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.1);
	padding: 6rpx 16rpx;
	border-radius: 12rpx;
}

.reservoir-links {
	display: flex;
	gap: 15rpx;
}

.link-btn {
	flex: 1;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	border-radius: 12rpx;
	padding: 18rpx;
	font-size: 26rpx;
	font-weight: 500;
	transition: all 0.2s ease;
}

.link-btn:active {
	transform: scale(0.95);
}

.link-btn.rainfall {
	background: rgba(76, 175, 80, 0.3);
	border-color: rgba(76, 175, 80, 0.5);
}

.link-btn.water {
	background: rgba(33, 150, 243, 0.3);
	border-color: rgba(33, 150, 243, 0.5);
}

/* 页脚 */
.footer {
	text-align: center;
	padding: 20rpx 0;
}

.btn-secondary {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	border-radius: 50rpx;
	padding: 20rpx 50rpx;
	font-size: 28rpx;
	font-weight: 500;
}

.btn-secondary:active {
	background: rgba(255, 255, 255, 0.3);
}
</style>